//邮箱绑定
<template>
  <div class="realinfo-wrapper">
     
       <div class="deyi" v-if="yxbdzt == 0">邮箱绑定</div>
       <div class="deyi" v-if="yxbdzt == 1">重新绑定邮箱</div>
      <span style="float: right;margin-right: 30px; margin-top: -23px;" v-on:click="tanchuan"><img src="../../assets/img/images/guan_bi.png" alt=""></span>
   
       <div v-if="neirong == 0">
           
           
                    <!-- 邮箱地址 -->
                    <b-row>
                        <b-col class="input-item">
                            <div class="item-name">{{$t('u_yxdz')}}</div>
                            <input class="item-val input" v-model="youxiang" :placeholder="$t('qsryxdz')" @blur="sendEmail()" @focus="send()" />
                            <div  class="tishi" v-if="tishi == 1">{{$t('qsrzqdyxdz')}}</div>
                        
                        </b-col>
                    </b-row>
                    <!-- 验证码-->
                    <b-row>
                            <b-col class="input-item">
                                <div class="item-name">{{$t('u_yzm')}}</div>
                                    <div class="yan_zheng_ma">
                                        <b-input class="item-val tianjia" style="width:528px;float:left" v-model="yangzhengma" :placeholder="$t('qsryxyzm')"></b-input>
                                        <button class="phone-code"  @click="currentGetPhoneCode()" variant="outline-secondary">{{btnText}}</button>
                                    </div>
                            </b-col>
                        </b-row>
                        <!-- 确认 -->
                    <b-row>
                            <b-col  class="input-item">
                                <div class="item-name"></div>
                                <button class="submit-btn" style=" margin: 28px auto;"  @click="bandingyouxiang()" variant="success">{{$t('u_bc')}}</button>
                            </b-col>
                    </b-row>
        </div>
        <div v-else>
            <div style="width:151px;height:151px;margin: 26px auto;">
                <img style="width:100%;height:100%" src="/src/assets/img/images/images/images/chengong_03.gif" alt=""/>
                </div>
            <div class="chenggong" style="text-align:center">绑定邮箱成功</div>
        </div>

  </div>

   

 

  
</template>

<script>
import { mapActions } from "vuex";
import { isIdCard,uploadFile,getLocalTime } from "../../assets/js/common";
import mixins from '../../assets/js/mixin'
export default {
    props:["dianji"],
  mixins:[mixins],
  data() {
    return {
        neirong:0,
       yxbdzt:0,
      msg: "实名认证",
      selected:this.$t('u_sfz'),
      btnText: this.$t('u_hqyzm'),
      authStatus:null,
      authInfo:null,
      yangzhengma:"",
      youxiang:"",
      once:false,

      name:"",
      certificateType:"", //证件类型
      certificateNo:"",  // 证件号
      cardVideoUrl:"",   // 手持照片
      fontImg:"",        // 正面
      backImg:"",        // 背面
      mobile:"",         // 

      userData:null,
      tishi:0,
      
    };
  },
  methods:{
      tanchuan(){
          this.$emit('child-say')

          this.neirong = 0
      },

     bangdingyouxianglll(){
      //获取邮箱绑定状态
      this.$http.post('/nb-web/api/user/email/exists'
      ).then(res => {
        if (res.data.code === '001') {
            this.yxbdzt = 1 
        }
      })
    },
    
      sendEmail(){
                var regEmail=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
                if(this.youxiang==''){
                  this.tishi = 0
                }else if(regEmail.test(this.youxiang)){
                    this.tishi = 1
                }
                console.log('zhixins')
            },
      send(){
            this.tishi = 0
      },
      imgUpload(fileId,imgId,tipsId,addId){
          uploadFile(fileId,imgId,tipsId,()=>{
              document.getElementById(addId).style.display = 'none';
          });
      },
      
      currentGetPhoneCode(){//获取邮箱验证码
      if(this.youxiang == ''){
           this.$swal(this.$t('yxbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
           return
      }
        this.getemailCode(this.youxiang).then(res => {
            if (res.data.code == "001") {
            this.countdown();
            }
        });
    },
    
    // currentGetEmailCode() {
    //        // 获取邮箱验证码暂时还没有
         
    //         if (this.yangzhengma == "") {
    //             // 請填寫手機號
    //             this.$swal(this.$t('r_qtxyx'));
    //             return false;
    //         }
    //         // if (!isPhoneNum(this.emaill)) {
    //         //     // 請填寫正確的手機號
    //         //     this.$swal(this.$t('r_qtxzqdyx'));
    //         //     return false;
    //         // }
    //         if (this.existsEmail) {
    //             // 該手機號碼已經註冊
    //             this.$swal(this.$t('r_gsjhyjzc'));
    //             return false;
    //         }
    //         this.getemailCode(this.emaill).then(res => {
    //             console.log("aa")
    //             if (res.data.code == "001") {
    //                 this.countdown();
    //             }
    //         });
    //     },
      setTypeText(val){
          console.log(val);
          switch (val) {
              case '0':
                  return this.$t('u_sfz');
                  break;
              case '1':
                return this.$t('u_hz');
                break;
              case '2':
                return this.$t('u_jsz');
                break;
                case '3':
                return this.$t('u_jgz');
                break;
                case '4':
                return this.$t('u_xgsfz');
                break;
                case '5':
                return this.$t('u_amsfz');
                break;
              default:
                  break;
          }
      },
      bandingyouxiang(){
        //绑定邮箱
        if (this.youxiang == '') {
          //邮箱不能为空
            this.$swal(this.$t('yxbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
            return false;
        }
        if (this.yangzhengma == '') {
          //验证码不能为空
            this.$swal(this.$t('yxbnwk'),{
					icon:'/static/img/tan_chuang.png'
				});
            return false;
        }
        
        this.once = true;
        this.getPublicKey().then(key => {
           
           
            this.$http
            .post("/nb-web/api/user/bind/email", {
                email: this.youxiang,
                mgsCode:this.yangzhengma
            })
            .then(res => {
                this.once = false;
                if (res.data.code == "001") {
                this.neirong = 1
                } else {
                this.$swal(res.data.msg,{
					icon:'/static/img/tan_chuang.png'
				});
                }
            });
        });
    },
    //   restart(){
    //       this.authStatus = 0;
    //   },
    //   transformIdCard(val){
    //       let strarr = val.split('');
    //           strarr.splice(5,11,"********");
    //           return strarr.join('');
    //   },
      ...mapActions([ 'ifLoadingChange'])
  },
 
  created(){
     
      this.bangdingyouxianglll()
   
  }
};
</script>

<style lang="scss" scoped>
html,body{
    height:100%;
}
.deyi{
    font-family: PingFangSC-Medium;
    font-size: 24px;
    color: #1F3F87;
    letter-spacing: 0;
    margin-left:30px;
}
.b-line{
    height: 28px;
}
.realinfo-wrapper{
    padding-top: 30px;
    height: 640px;
    overflow-y: scroll;
    .alert-tips{
        font-size: 12px;
    }
    .input-item{
        display: flex;
        padding:10px 10px 10px 14px;
        
        font-size: 14px;
        flex-direction:column;
        .item-name{
            width: 180px;
            margin-right: 10px;
            line-height: 38px;
            margin-left:30px;
            font-family: PingFangSC-Medium;
            font-size: 16px;
            color: #1F3F87;
            letter-spacing: 0;
            text-align: left;
        }
        .item-state{
            line-height: 38px;
            text-align: left;
        }
        .item-val{
            flex:1;
            font-size: 14px;
            width:528px;
            margin-left: 30px;
        }
    }
    .submit-btn{
        width: 276px;
        height:50px;
        margin-left: 160px;
        background-image: linear-gradient(-90deg, #6CA5FF 1%, #5291FF 99%)!important;
        border-radius: 10px;
        border:none;
        font-family: PingFangSC-Medium;
        font-size: 18px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
    }
}
.zhao_pian_shang_chuan{
    margin:30px 30px 0px 30px;
}
.upload-title{
    margin-top: 20px;
}
.upload-item{
    padding:0;
    
    p{
        text-align: left;
        color: #666;

        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #1F3F87;
        letter-spacing: 0;
        height:40px;
        line-height:40px;
    }
    .upload-group{
        position: relative;
        width: 526px;
        height: 240px;
        border: 1px solid #99A7C8;
        border-radius: 4px;
        input[type=file]{
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            outline: none;
            opacity: 0;
            z-index: 1;
        }
        .img-bg{
            position: absolute;
            width: 280px;
            height: 180px;
            left: 130px;
            top: 30px;
        }
        .img-add{
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
    }
}
.upload-tips-text{
    margin-top:60px;
    .text{
        line-height: 24px;
        font-family: PingFangSC-Medium;
        font-size: 16px;
        color: #1F3F87;
        letter-spacing: 0;
    }
}
.row{
    margin-right:0;
}
.tianjia{
    position: relative;
}
.phone-code{
    position: absolute;
    right: 30px;
    top: 51px;
    height: 28px;
    line-height: 29px;
    padding: 0 15px;
    border: 0;
    background: transparent;
    border-left: 1px solid #99A7C8;
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    letter-spacing: 0;
}
.tishi{
    font-family: PingFangSC-Medium;
    font-size: 12px;
    color: #D75F5F;
    letter-spacing: 0;
    width: 180px;
    margin-right: 10px;
    line-height: 38px;
    margin-left: 30px;
    
    text-align: left;
}
.input{
    height:35px;
    padding:6px 12px;
    border: 1px solid #ced4da;
    border-radius:6px;
}
.chenggong{
    font-family: PingFangSC-Medium;
    font-size: 16px;
    color: #1F3F87;
    letter-spacing: 0;
}
</style>


